<template>
<div class="bg-white">
  <div class="cu-form-group text-lg solid-bottom margin-right-sm margin-left-sm">
    <div class="title text-bold" style="color: #3d3d3d">完善以下信息</div>
  </div>
  <div class="cu-form-group text-lg solid-bottom margin-right-sm margin-left-sm">
    <div class="title" style="color: #3d3d3d">员工姓名</div>
    <input placeholder="员工姓名" v-model="employee.name"/>
  </div>
  <div class="cu-form-group text-lg solid-bottom margin-right-sm margin-left-sm">
    <div class="title" style="color: #3d3d3d">联系电话</div>
    <input placeholder="联系电话"  v-model="employee.tel"/>
  </div>
  <div>
    <div class="flex padding-sm padding-top-xl">
      <div class="title text-bold padding-left text-lg" style="color: #3d3d3d">
        权限
      </div>
      <div class="flex-sub text-right action">
        <button v-if="employee.auth===0" class="cu-btn bg-red" @tap="showAdminModal=true">取消管理员权限</button>
        <button v-else class="cu-btn bg-green" @tap="showAdminModal=true">授予管理员权限</button>
      </div>
    </div>
    <checkbox-group @change="checkboxChange" class="flex text-center text-lg">
      <div class="flex-sub flex bg-gray margin-xl padding-xs margin-top margin-left">
        <checkbox type="checkbox" class="flex-sub round" style="transform:scale(0.7)" :value="checkedData[0]" :checked="employee.auth===0||employee.auth===1||employee.auth===2"/>
        <text class="flex-treble text-left padding-top-xs"  style="color: #4b4b4b">仓管</text>
      </div>
      <div class="flex-sub flex bg-gray margin-xl padding-xs margin-top margin-left">
        <checkbox type="checkbox" class="flex-sub round" style="transform:scale(0.7)" :value="checkedData[1]" :checked="employee.auth===0||employee.auth===1||employee.auth===3"/>
        <text class="flex-treble text-left padding-top-xs"  style="color: #4b4b4b">收银</text>
      </div>
    </checkbox-group>
  </div>
</div>
  <div class="padding flex flex-direction">
    <button class="cu-btn bg-green lg" @tap="commit">提交</button>
  </div>
  <div :class="'cu-modal bottom-modal '+ (showModal?'show':'')">
    <div class="cu-dialog">
      <div class="cu-bar bg-white">
        <div class="action text-red text-xl" @tap="onOKClick">确定</div>
        <div class="action text-lg" @tap="showModal=false">取消</div>
      </div>
      <div class="padding-xl text-orange text-lg">
        确定提交员工信息吗
      </div>
    </div>
  </div>
  <div :class="'cu-modal bottom-modal '+ (showAdminModal?'show':'')">
    <div class="cu-dialog">
      <div class="cu-bar bg-white">
        <div class="action text-red text-xl" @tap="onAdminClick">确定</div>
        <div class="action text-lg" @tap="showAdminModal=false">取消</div>
      </div>
      <div class="padding-xl text-orange text-lg">
        {{modalMessage}}
      </div>
    </div>
  </div>
  <div :class="'cu-modal '+(showOKModal?'show':'')">
    <div class="cu-dialog">
      <div class="cu-bar bg-white justify-end">
        <div class="content">请保存好账号和密码</div>
      </div>
      <div class="padding-xl">
        账号：{{this.employee.id}}<br/>
        密码：{{this.employee.password}}
      </div>
      <div class="cu-bar bg-white justify-end">
        <div class="action">
          <button class="cu-btn bg-green margin-left" @tap="done">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: "AddEmployee",
  data(){
    return{
      employee:{
        storeId: uni.getStorageSync("currentStoreMain").storeId
      },
      checkedData:[2,3],
      showModal:false,
      modalMessage:"确定授予管理员权限吗",
      showAdminModal:false,
      showOKModal:false
    }
  },
  onLoad(){
    uni.setNavigationBarTitle({
      title: '员工信息'
    });
  },
  methods:{
    commit(){
      console.log(this.employee)
      if (isNaN(this.employee.auth)){
        uni.showToast({
          title: '至少有一条权限',
          icon: 'error',
          duration: 1500
        })
        return
      }
      if(this.employee.name===""||this.employee.name===undefined){
        uni.showToast({
          title: '姓名不能为空',
          icon: 'error',
          duration: 1500
        })
        return
      }
      if(this.employee.tel===""||this.employee.tel===undefined){
        uni.showToast({
          title: '电话不能为空',
          icon: 'error',
          duration: 1500
        })
        return
      }
      this.showModal=true
    },
    onOKClick(){
      this.employee.id=(new Date().getTime()/1000).toString().substring(-1,9)
      this.employee.password=this.employee.tel.substring(this.employee.tel.length-6)
      request.post("/store/add/employee",this.employee).then(res=>{
        this.showOKModal=true
        this.showModal=false
      })
    },
    checkboxChange(e){
      if (e.detail.value.length===2)
        this.employee.auth=1
      else
        this.employee.auth=parseInt(e.detail.value[0])
    },
    onAdminClick(){
      if (this.employee.auth!==0){
        this.employee.auth=0
        this.modalMessage="确定取消管理员权限吗"
      } else{
        this.employee.auth=1
        this.modalMessage="确定授予管理员权限吗"
      }
      this.showAdminModal=false
    },
    done(){
      this.showOKModal=false
      let pages = getCurrentPages()
      let prevPage = pages[pages.length - 2]
      uni.navigateBack({
        delta:1,
        success:() => {
          prevPage.$vm.otherFun("update")
        }
      })
    }
  }
}
</script>

<style scoped>

</style>